<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="船舶资料" name="1">
        <el-descriptions :column="4"  border>
          <el-descriptions-item
            v-for="item in descriptionsData[0]" :key="item.prop"
            :label="item.label" 
            :span="item.span"
            label-class-name="my-label" 
            content-class-name="my-content"
          >{{shipData[0][item.prop]}}</el-descriptions-item>
        </el-descriptions>
			</el-collapse-item>
      <el-collapse-item title="航次信息" name="2">
        <el-descriptions :column="4"  border>
          <el-descriptions-item
            v-for="item in descriptionsData[1]" :key="item.prop"
            :label="item.label" 
            :span="item.span"
            label-class-name="my-label" 
            content-class-name="my-content"
          >{{shipData[1][item.prop]}}</el-descriptions-item>
        </el-descriptions>
			</el-collapse-item>
      <el-collapse-item title="靠离泊计划" name="3">
        <template slot="title">
          <div class="slotTitle">
            <span>靠离泊计划</span>
            <el-button type="text" @click.stop="saveBerth">保存</el-button>
          </div>
        </template>
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
            <el-col :span="8">
							<el-form-item label="计划靠泊时间" prop="berthTime" class="top">
								<el-date-picker
									v-model="formData.berthTime"
									type="datetime"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  size="mini" 
									placeholder="请选择计划靠泊时间"
								></el-date-picker>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划靠泊泊位" prop="berthId" class="top">
								<el-select
									v-model="formData.berthId"
                  v-selecttext="formData.berthNo,berthSelectData,'id'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in berthSelectData"
										:key="item.berthNo"
										:label="item.berthNo"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划离泊时间" prop="leaveBerthTime" class="top">
								<el-date-picker
									v-model="formData.leaveBerthTime"
									type="datetime"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  size="mini" 
									placeholder="请选择计划离泊时间"
								></el-date-picker>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划移泊时间" prop="moveBerthTime" class="top">
								<el-date-picker
									v-model="formData.moveBerthTime"
									type="datetime"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  size="mini" 
									placeholder="请选择计划移泊时间"
								></el-date-picker>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="计划移泊泊位" prop="moveBerthId" class="top">
								<el-select
									v-model="formData.moveBerthId"
                  v-selecttext="formData.moveBerthNo,berthSelectData,'id','berthNo'"
									filterable
									collapse-tags
									size="mini"
									clearable
									class="others"
								>
									<el-option
										v-for="item in berthSelectData"
										:key="item.berthNo"
										:label="item.berthNo"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import api from '@/api/Dispatch/boatDispatch'

export default {
  name: 'detail',
  components: { BaseTable },
  props: {
    // 表单验证规则
    rules: {
      type: Object
    },
    // 描述data
    descriptionsData: {
      type: Array,
      default: () => []
    },
    // 船详细信息
    shipData: {
      type: Array,
      default: () => []
    },
    // 泊位下拉框
    berthSelectData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeNames: ['1', '2', '3'],
      formData: { 'createBy': '', 'createName': '', 'createTime': '', 'updateBy': '', 'updateName': '', 'updateTime': '', 'approvalBy': null, 'approvalName': null, 'approvalTime': null, 'shipvoyageName': null, 'shipNameEn': null, 'groupBerthTime': null, 'berthNo': '', 'tugNumber': null, 'cargoCategoryName': null, 'shipLengthWidth': null, 'loadWeight': null, 'customerName': null, 'groupDraft': null, 'groupPilotage': null, 'id': '', 'shipvoyageId': '', 'berthTime': '', 'berthId': null, 'workStartTime': null, 'workEndTime': null, 'moveBerthTime': '', 'moveBerthId': null, 'moveBerthNo': '', 'leaveBerthTime': '', 'remark': null, 'startTime': null, 'endTime': null } // from
    }
  },
  methods: {
    /**
     * 保存靠离泊计划
     */
    async saveBerth() {
      if (this.formData.id === null) {
        const res = await api.reqAddBerthing(this.formData)
        if (res.data.code === '0000') {
          this.$message.success('保存成功！')
          this.$emit('closeDrawer')
        }
      } else {
        const res = await api.reqEditBerthing(this.formData)
        if (res.data.code === '0000') {
          this.$message.success('保存成功！')
          this.$emit('closeDrawer')
        }
      }
    },

    /**
     * 按钮事件
     */
    buttonClick(i) {
      i()()
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";

/deep/ .slotTitle {
  width: 100%;
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
}
/deep/ .my-label {
        background: rgb(237,244,255);
        width: 10%;
    }
    /deep/ .my-content {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(0,0,0,0.85);
        padding: 12px 25px;
    }
[v-cloak] {
	display: none;
}
</style>
